<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <h3>用户信息</h3>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ userInfo.realName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ userInfo.email || '-' }}</el-descriptions-item>
            <el-descriptions-item label="手机">{{ userInfo.mobile || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <h3>权限信息</h3>
            </div>
          </template>
          <div>
            <h4>角色列表</h4>
            <el-tag
              v-for="role in roles"
              :key="role"
              class="mr-10 mb-10"
            >
              {{ getRoleLabel(role) }}
            </el-tag>
            <div v-if="!roles.length" class="empty-text">暂无角色</div>
            
            <h4 class="mt-20">权限列表</h4>
            <el-tag
              v-for="permission in permissions"
              :key="permission"
              type="success"
              class="mr-10 mb-10"
            >
              {{ getPermissionLabel(permission) }}
            </el-tag>
            <div v-if="!permissions.length" class="empty-text">暂无权限</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { getPermissionLabel, getRoleLabel } from '@/utils/permissionLabels';

export default {
  name: 'DashboardPage',
  setup() {
    const store = useStore();
    
    const userInfo = computed(() => store.getters.userInfo || {});
    const roles = computed(() => store.getters.roles || []);
    const permissions = computed(() => store.getters.permissions || []);
    
    return {
      userInfo,
      roles,
      permissions,
      getPermissionLabel,
      getRoleLabel
    };
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  height: auto;
  min-height: calc(100vh - 120px); /* 减去header和padding的高度 */
}

.dashboard-card {
  height: 100%;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-20 {
  margin-top: 16px;
}

.mr-10 {
  margin-right: 8px;
}

.mb-10 {
  margin-bottom: 8px;
}

.empty-text {
  color: #909399;
  font-size: 14px;
  padding: 8px 0;
}
</style> 